<template>
  <el-dialog ref="batchOrderDetail-dialog" custom-class="wf-dialog" :visible.sync="visible" title="集采工单详情" width="60%" :before-close="handleClose" append-to-body>
    <avue-crud :option="option"
               :table-loading="loading"
               :page.sync="page"
               :data="data"
               v-model="form"
               :search.sync="query"
               ref="crud"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad"
               >
      <template slot="searchMenu">
        <el-button size="small" type="primary" v-if="permission.batchOrder_audit && status === 1" icon="el-icon-check" @click="openAuditForm()">审核</el-button>
        <el-button size="small" type="primary" v-if="permission.batchOrder_audit1 && status === 4" icon="el-icon-check" @click="openAuditForm()">医保局审核</el-button>
        <el-button size="small" type="warning" icon="el-icon-download" @click="handleExport()">导出</el-button>
      </template>
    </avue-crud>
    <el-dialog title="工单审核"
               append-to-body
               :visible.sync="auditBox"
               width="555px">
      <avue-form :option="auditOption" v-model="auditForm" @submit="auditSubmit">
      </avue-form>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import { getList } from "@/api/business/batchOrderItem";
  import { audit } from "@/api/business/batchOrder";
  import {mapGetters} from "vuex";
  import {getToken} from '@/util/auth';
  import {downloadXls} from "@/util/util";
  import {dateNow} from "@/util/date";
  import {exportBlob} from "@/api/common";
  import NProgress from 'nprogress';
  import 'nprogress/nprogress.css';

  export default {
    name: 'batchOrderDetail',
    props: {
      batchOrderId: {
        type: String,
        required: true
      },
      status: {
        type: Number,
        required: true
      }
    },
    created() {},
    data() {
      return {
        auditBox: false,
        auditForm: {},
        auditOption: {
          submitBtn: true,
          emptyBtn: true,
          column: [
            {
              label: "审核结果",
              prop: "auditResult",
              type: "radio",
              value: '审核通过',
              span: 24,
              dicData: [
                {
                  label: '审核通过',
                  value: '审核通过'
                },
                {
                  label: '审核不通过',
                  value: '审核不通过'
                }
              ],
              props: {
                label: "label",
                value: "value"
              },
              rules: [
                {
                  required: true,
                  message: "请选择审核结果",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "审核备注",
              prop: "remark",
              type: "input",
              span: 24,
            }
          ]
        },
        visible: false,
        form: {},
        query:{},
        loading: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        option: {
          emptyBtn: false,
          addBtn: false,
          refreshBtn: false,
          searchBtn: false,
          searchShowBtn: false,
          columnBtn: false,
          height:'480',
          align:'center',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          indexLabel: '序号',
          menu: false,
          dialogClickModal: false,
          column: [
            {
              label: "药品流水号",
              width: 100,
              prop: "medicineNo",
              type: "input",
              overHidden: true,
            },
            {
              label: "药品名称",
              width: 220,
              prop: "medicineName",
              type: "input",
              overHidden: true,
            },
            {
              label: "剂型",
              prop: "shotType",
              overHidden: true,
              type: "input",
            },
            {
              label: "规格",
              prop: "specification",
              type: "input",
              overHidden: true,
            },
            {
              label: "包装",
              prop: "packages",
              type: "input",
              overHidden: true,
            },
            {
              label: "生产厂家",
              width: 160,
              prop: "produceCompanyName",
              overHidden: true,
              type: "input",
            },
            {
              label: "中选价",
              width: 80,
              prop: "bidPrice",
              type: "input",
            },
            {
              label: "约定量(片/袋/支)",
              width: 120,
              prop: "appointAmount",
              type: "input",
            },
            {
              label: "合同量(片/袋/支)",
              width: 120,
              prop: "contractAmount",
              type: "input",
            },
            {
              label: "实际采购(片/袋/支)",
              width: 130,
              prop: "buyAmount",
              type: "input",
            },
            {
              label: "合同金额",
              width: 100,
              prop: "contractFee",
              type: "input",
            },
            {
              label: "实际采购金额",
              width: 100,
              prop: "buyFee",
              type: "input",
            },
            {
              label: "批次",
              prop: "batchName",
              type: "input",
              value: this.batchName,
              searchDisabled: true,
              overHidden: true,
              search: true,
              hide: true
            },
            {
              label: "医院",
              prop: "instName",
              type: "input",
              value: this.instName,
              searchDisabled: true,
              overHidden: true,
              search: true,
              hide: true
            },
            {
              label: "配送企业",
              prop: "companyName",
              type: "input",
              searchDisabled: true,
              value: this.companyName,
              overHidden: true,
              search: true,
              hide: true
            }
          ]
        },
        data: [],
      };
    },
    computed: {
      ...mapGetters(["userInfo","permission","loginUserInfo"]),
    },
    methods: {
      handleClose(done) {
        this.visible = false;
        if (done && typeof done == 'function') done()
      },
      searchChange(params, done) {
        console.log("search",params,this.query);
        this.page.currentPage = 1;
        this.query = params;
        this.onLoad(this.page,params);
        done();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      onLoad(page,params = {}) {
        this.loading = true;
        let param = {
          batchOrderId: this.batchOrderId
        };
        getList(page.currentPage, page.pageSize, param).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        });
      },
      auditSubmit(form, done, loading) {
        let param = {
          ...form,
          id: this.batchOrderId
        };
        audit(param).then( res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: res.data.msg
            });
            this.auditBox = false;
            this.handleClose();
            this.$emit('onConfirm');
          } else {
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      openAuditForm() {
        this.auditBox = true;
      },
      handleExport() {
        this.$confirm("是否导出该工单明细数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          NProgress.start();
          exportBlob(`/api/batchOrder/export-orderItem?${this.website.tokenHeader}=${getToken()}&batchOrderId=${this.batchOrderId}`).then(res => {
            downloadXls(res.data, `集采药械工单明细${dateNow()}.xlsx`);
            NProgress.done();
          })
        });
      },
    }
  };
</script>

<style>
</style>
